<template>
	<div class="tob">
		<div class="tob_title">
			<div @click="type_view='all'" :class="type_view=='all'?'type_view':''">所有景点</div>
			<div v-for="i in arr" @click="type_view = i" :class="type_view==i?'type_view':''">{{i}}</div>
		</div>
		<div>
			<div v-show="type_view == 'all'">
				<el-row class="box_view" :gutter="40">
					<el-col v-for="i in data" :key="i.uid" :span="8">
						<box_view :tob_json="i" style="padding: 20px 0;"></box_view>
					</el-col>
				</el-row>				
			</div>
			<div v-show="type_view !='all'">
				<el-row class="box_view" :gutter="40">
					<el-col v-for="i in data" :key="i.uid" :span="8" v-show="i.type == type_view">
						<box_view :tob_json="i" style="padding: 20px 0;"></box_view>
					</el-col>
				</el-row>		
			</div>
		</div>
	</div>
</template>

<script>
	import box_view from './box_view.vue'
	export default {
		components: {
			box_view
		},
		data() {
			return {
				type_view: 'all',
				arr: ['第1区', '第2区', '第3区'],
				data: [{
						title: '卢浮宫',
						type: '第1区',
						imgurl: 'https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8xMi80ZTYwMTNhMGVlZGMxMzlmNDYzNjIzZmMyZmI5Nzk5My00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp',
						rate: 8.5,
						uid: 0
					},
					{
						title: '蓬皮社中心',
						type: '第1区',
						imgurl: 'https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC9mNGU1M2Q1MDc3NTllNDQ4OTZmMDRhNjYwN2ZjMzIzZS00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp',
						rate: 8.5,
						uid: 0
					},
					{
						title: '塞纳河',
						type: '第2区',
						imgurl: 'https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC83NGE1MGZmMmQ4MWRmYjlmMmE3MDMyMjE1ZTBjMTdhNC00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp',
						rate: 7.5,
						uid: 0
					},
					{
						title: '巴黎圣母院',
						type: '第3区',
						imgurl: 'https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC8wY2M1Y2JkZTg0YmVhMWMwNzRmNDY1MGY0ODBjYTE0NS00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp',
						rate: 6.5,
						uid: 0
					},
					{
						title: '凯旋门',
						type: '第2区',
						imgurl: 'https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8xMi9kMjU3OTJhZTJiYzY0NDg2MzkxYzYwZmM3MTM4ZjNiMi00NTB4MjYwLTkwLndlYnA_p_p100_p_3D.webp',
						rate: 9.5,
						uid: 0
					},
				]
			}
		}
	}
</script>

<style>
	.tob .tob_title {
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		color: #8E8E8E;
		padding: 20px 0;
	}
	
	.tob .tob_title>div {
		display: inline-block;
		padding: 0 10px;
		border: 1px solid #CCCCCC;
		margin: 0 5px;
		transition: all .3s;
	}
	
	.tob .tob_title>div:hover {
		border: 1px solid red;
		color: red;
	}
	
	.type_view {
		border: 1px solid red !important;
		color: red;
	}
	/*.box_view{
		  display: -webkit-flex;
		    display: flex;
		    width: 100%;
		    flex-wrap:wrap;
	}
	.box_view>div{
	 width: 33%;
	}*/
	
</style>